<template>
  <div class="com-form">
    <a-descriptions
      style="margin-top: 20px"
      :size="'large'"
      layout="inline-horizontal"
      :column="3"
    >
      <a-descriptions-item
        v-for="item of dataList"
        :key="item.label"
        :label="item.label"
      >
        <span v-if="item.code === 'secretLevel'">{{
          getDictDataRecordList('secretLevel', item.value)
        }}</span>
        <span v-else-if="item.code === 'openFlag'">{{
          getDictDataRecordList('openFlag', item.value + '')
        }}</span>
        <span v-else-if="item.code === 'orderType'">{{
          getDictDataRecordList('orderType', item.value + '')
        }}</span>
        <span v-else-if="item.code === 'abroadFlag'">{{
          getDictDataRecordList('abroadFlag', item.value + '')
        }}</span>
        <span v-else>{{ item.value }}</span>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, watch, onMounted } from 'vue';
  import lodash from 'lodash';
  import { queryDictDataRecordList } from '@/api/system/dictionary';
  import { commonFormData } from './config';

  const props = defineProps({
    formInfo: {
      type: Object,
      default: null,
    },
  });
  const dataList = ref<any[]>([]);
  const initData = (valForm: any) => {
    dataList.value = commonFormData.map((item: any) => {
      const temp = {
        label: `${item.label}: `,
        value: lodash.get(valForm, item.code, ''),
        code: item.code,
      };
      return temp;
    });
  };
  const dict = ref<any>({
    secretLevel: [],
    openFlag: [
      {
        label: '正常',
        value: '0',
      },
      {
        label: '开口',
        value: '1',
      },
    ],
    orderType: [],
    abroadFlag: [],
  });
  const getDictDataRecordList = (dictType: string, val: string) => {
    let label = '';
    if (!val) {
      return '';
    }
    const arr = dict.value[dictType].filter((item: any) => {
      return item.value === val;
    });
    if (arr.length > 0) {
      label = arr[0].label;
    }
    return label;
  };
  onMounted(async () => {
    const sres: any = await queryDictDataRecordList({
      dictType: 'secretLevel',
    });
    dict.value.secretLevel = sres.data;
    const ores: any = await queryDictDataRecordList({ dictType: 'orderType' });
    dict.value.orderType = ores.data;
    const ares: any = await queryDictDataRecordList({ dictType: 'abroadFlag' });
    dict.value.abroadFlag = ares.data;
    console.log('label', dict);
  });
  watch(
    () => props.formInfo,
    () => {
      if (props.formInfo) {
        initData(props.formInfo);
      }
    },
    {
      deep: true,
      immediate: true,
    }
  );
</script>

<style lang="less" scoped>
  .com-form {
    padding: 16px 16px 0;
    background: #f7f9fc;
    border-radius: 8px;

    :deep(.arco-descriptions) {
      margin-top: 0 !important;

      .arco-descriptions-body {
        .arco-descriptions-row {
          display: flex;
          margin-bottom: 22px;

          .arco-descriptions-item {
            flex: 1;

            .arco-descriptions-item-label {
              margin-right: 10px !important;
            }
          }
        }
      }
    }
  }
</style>
